<template>
  <div class="playingContainer">
    <a-row>
      <a-col :span="8">
        <div class="coverContainer">
          <div class="warpper">
            <div class="pan">
              <div v-show="cover" class="coverImg" :style="{backgroundImage:'url('+cover+')'}">
              </div>
            </div>
          </div>
        </div>
      </a-col>
      <a-col :span="14">
        <div class="musicInfo">
          <div v-show="name" class="musicName">{{ name }}</div>
          <div v-show="author" class="author">{{ author }}</div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import Vue from "vue";
import {CURRENT_PLAYING_MUSIC} from "@/store/mutation-types";
export default {
  name: "Playing",
  data() {
    return {
      cover: undefined, // 默认封面
      name: '未知',
      author: '未知',
    }
  },
  beforeMount() {
    this.$eventBus.$on('updateCover', ()=>{
      this.updateCover()
    });
  },
  mounted() {
    this.updateCover(Vue.ls.get(CURRENT_PLAYING_MUSIC))
  },
  methods: {
    // 更改播放器的封面，歌曲名、作者
    updateCover(){
      let musicInfo =  this.$store.getters.currentPlayingMusic;
      if (musicInfo!= null && JSON.stringify(musicInfo) !== '{}'){
        this.cover = musicInfo.coverImgUrl;
        this.name = musicInfo.name;
        this.author = musicInfo.author;
      }else {
        musicInfo =  Vue.ls.get(CURRENT_PLAYING_MUSIC);
        if (musicInfo != null && JSON.stringify(musicInfo) == '{}'){
          this.cover = musicInfo.coverImgUrl;
          this.name = musicInfo.name;
          this.author = musicInfo.author;
        }
      }

    }
  },
  destroyed() {
    this.$eventBus.$off('updateCover')
  }
}
</script>

<style scoped>
.playingContainer {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.coverContainer {
  width: 100%;
  height: 4rem;
  margin: 0;
  padding-top: 0.5rem;
}

.warpper {
  width: 3rem;
  height: 3rem;
  display: inline-block;
}

/*播放器背景*/
.pan {
  background-image: url("../../../assets/pan.png");
  width: 3rem;
  height: 3rem;
  background-repeat: round;
  border-radius: 45px;
  /*旋转*/
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 5s;
  -moz-transition-property: -moz-transform;
  -moz-transition-duration: 5s;
  -webkit-animation: rotate 5s linear infinite;
  -moz-animation: rotate 5s linear infinite;
  -o-animation: rotate 5s linear infinite;
  animation: rotate 5s linear infinite;


}

/*歌曲封面*/
.coverImg {
  width: 3rem;
  height: 3rem;
  border-radius: 30px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 15px;
}

.musicInfo {
  display: inline-block;
  /*width: calc(100% - 3rem);*/
  width: 100%;
  height: 3rem;
  margin-top: 0.6rem;
  overflow: hidden;
}

.musicName {
  white-space: nowrap;
}

.musicName:hover {
  animation-play-state: paused;
}

.author {
  white-space: nowrap;
}

/*todo 歌曲名称滚动 */
/*  参考地址： http://www.divcss5.com/wenji/w193.shtml*/

</style>
